<template>
  <div class="container">
    <el-card>
      <!-- 新增试题 -->
      <div class="head_que">
        <span class="text">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <QuestionHead
        @changeForm="changeFormFn"
        @searchChoice="searchFn"
        @getChoice="getChoice"
      />
      <!-- 提示文案 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <!-- 表格 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <QuestionBody
            v-if="this.activeName === 'first'"
            :activeName="activeName"
            :total.sync="total"
            :questionForm="questionForm"
            ref="searchChoice"
          />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <QuestionBody
            v-if="this.activeName === 'second'"
            :activeName="activeName"
            :total.sync="total"
            :questionForm="questionForm"
            ref="searchChoice"
          />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <QuestionBody
            v-if="this.activeName === 'third'"
            :activeName="activeName"
            :total.sync="total"
            :questionForm="questionForm"
            ref="searchChoice"
          />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <QuestionBody
            v-if="this.activeName === 'fourth'"
            :activeName="activeName"
            :total.sync="total"
            :questionForm="questionForm"
            ref="searchChoice"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import QuestionHead from '../../components/QusetionHead/index.vue'
import QuestionBody from '../components/question-body.vue'
export default {
  data () {
    return {
      questionForm: {},
      total: 0,
      activeName: 'first'
    }
  },
  components: {
    QuestionHead,
    QuestionBody
  },
  methods: {
    changeFormFn (value) {
      this.changeForm = value
      console.log(this.changeForm)
    },
    getChoice (value) {
      this.questionForm = value
    },
    // 搜索
    searchFn (value) {
      this.questionForm = value
      this.$refs.searchChoice.questObj.page = 1
      this.$refs.searchChoice.getChoice()
    },
    // 标签页
    handleClick (tag) {
      this.activeName = tag.name
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 0 10px;
  margin-top: 10px;
  .el-card__body {
    padding: 20px;
    .head_que {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      .text {
        font-size: 12px;
        color: pink;
      }
    }
    .el-form {
      font-weight: 700;

      .el-form-item__label {
        font-size: 16px !important;
      }
    }
    .el-alert {
      margin-bottom: 15px;
    }
    .page {
      float: right;
      margin: 20px 0;
    }
  }
}
</style>
